<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        .star-box{
            /* display: inline-block; */
        }
        .iconfont{
            cursor: pointer;
        }
        .icon-collection-b{
            color: goldenrod;
            padding-right: 4px;
        }
        .icon-collection{
            color: #999;
            padding-right: 4px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <!-- h5的自定义标签 == 不可能实现标签和vue的构造器关联操作 -->
    <itany-star></itany-star>

    <hr>

    <div id="app">
        <ul>
            <li>服务评价(3)：<itany-star></itany-star> </li>
            <li>物流评价(2)：<itany-star></itany-star> </li>
            <li>商品评价(4)：<itany-star></itany-star> </li>
        </ul>
        <hr>
        <itany-star v-for="(item, index) in 3" :key="index"></itany-star>
        <hr>
        <itany-test></itany-test>
    </div>
    <hr>
    <div id="root">
        <itany-star></itany-star>
        <!-- <itany-test></itany-test> -->
    </div>

    <script type="text/x-template" id="star">
        <div class="star-box" @mouseout=" source=temp ">
            <span class="iconfont" 
                v-for=" item in 5 " 
                :class=" source>=item?'icon-collection-b':'icon-collection' "
                @mouseover=" setSouce(item) "
                @click=" setSourc(item) "
            ></span>
            <span>{{ source }}</span>
        </div>
    </script>

    <script>
        /*
            组件名称的描述规则
                1、vue官方建议，组件标签名因由多个单词组成（ 防止和已知的HTML标签产生覆盖冲突 ）
        */
        // 全局组件注册
        Vue.component("itany-star", Vue.extend({
            template:"#star",
            data(){
                return {
                    source:0,
                    temp:0
                }
            },
            methods: {
                setSouce(nv){
                    this.source = nv;
                },
                setSourc(nv){
                    this.temp = nv;
                }
            },
            beforeCreate() {
                console.log("itany-star创建实例:"+Math.random())  
            },
        }) )

        new Vue({
            el:"#app",
            // 局部组件注册
            components:{
                // key:value
                // key 组件名 value 组件构造器的取值
                "itany-test":Vue.extend({
                    template:"<h1>测试局部组件</h1>"
                })
            }
        })
        new Vue({
            el:"#root"
            
        })
    </script>
</body>
</html>